<template> 
    <div class="login-bg"> 
        <div class="main"> 
            <login-input color="#333" v-model="form.phone" placeholder="请输入旧手机号"></login-input>
            <login-input color="#333" v-model="form.msg" type="reg" placeholder="请输入验证码" @send="sendMsg" :second="countdown" :disabled="disabled"></login-input> 
            <div class="sub-btn text-center" @click="submitBtn(1)">下一步</div> 
        </div>  
    </div> 
</template>

<script>
import loginInput from '@/components/tpl/login-input' 
import * as api from '@/utils/api' 
export default { 
    components: {
        loginInput
    }, 
    data () {
        return {
            form:{
                phone:'',
                msg:''
            }, 
            countdown:60,
            disabled:true, 
        }
    },
    methods:{ 
        submitBtn(val){
            let vm = this;  
            if(vm.regFrom()){
                let body={
                    data:{
                        phone:vm.form.phone.trim(),
                        code:vm.form.msg
                    }
                };
                api.oldPhoneVerify(body).then(res=>{
                    if(res.data.code==200){ 
                        let url='./../set-new-phone/main';
                        wx.navigateTo({url})   
                    } 
                })
            } 
        }, 
        regFrom(){
            let vm=this;
            let phoneNo=/^[1][3,4,5,6,7,8][0-9]{9}$/;
            // let regPwd=/(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,16}$/;
            if(vm.form.phone.length>11||!phoneNo.test(vm.form.phone.trim())||vm.form.phone==''){
                wx.showToast({icon:'none',title:'请输入正确的手机号'});
                return false;
            }
            else if(vm.form.msg==''){
                wx.showToast({icon:'none',title:'验证码不能为空'});
                return false;
            }
            else{
                return true;
            }
        },
        //发送验证码
        sendMsg(){ 
            let vm = this; 
            let phoneNo=/^[1][3,4,5,6,7,8][0-9]{9}$/;
            if(vm.form.phone&&phoneNo.test(vm.form.phone.trim())){
                api.getSendMsg({phone:vm.form.phone}).then(res=>{
                    if(res.data.code==200){
                        vm.settime()
                    }
                })
            }else{
                wx.showToast({icon:'none',title:'请输入手机号'});
            }  
        },
        settime() {
            let vm = this;
            if (vm.countdown == 0) { 
                vm.disabled=true;
                vm.countdown = 60;
            } else {
                vm.disabled=false;
                vm.countdown--;
                setTimeout(function() {
                    vm.settime()
                },1000)
            }
        }, 
    
    }, 
}

</script>
 
<style scoped lang="scss">
 
.login-bg{
    position:relative;
    height:100%;
    background:#fff; 
    .main{
        position:absolute;
        z-index:10;
        width:100%;
        padding:60rpx;
        box-sizing:border-box;
        margin-top:220rpx;
        .sub-btn{
            width:100%;
            height:80rpx;
            line-height:80rpx;
            background:#CD4640;
            color:#fff;
            border-radius:10rpx;
            margin-top:45rpx;
        }   
        .sub-btn:active{
            background-color:rgba(205,70,64,0.5)
        } 
    }
} 
</style>
